<template>
  <div class="about-page">
    <div class="container">
      <!-- Page Header -->
      <div class="page-header">
        <h1>About Us</h1>
        <p>{{ appStore.storeInfo.site_name || 'Lucy African Fashion' }}</p>
      </div>

      <!-- About Content -->
      <el-row :gutter="40" class="about-section">
        <el-col :xs="24" :md="12">
          <div class="about-text">
            <h2>Who We Are</h2>
            <p>
              {{ appStore.storeInfo.about_text || 
                'We are located in Yulong Garment City, Yuexiu District, Guangzhou, specializing in African women\'s fashion wholesale. Our commitment is to provide high-quality African fashion products to customers worldwide.' }}
            </p>
            
            <h3>Our Mission</h3>
            <p>
              To bridge the gap between Chinese manufacturing excellence and African fashion trends, 
              providing our customers with the best quality products at competitive prices.
            </p>
            
            <h3>Why Choose Us</h3>
            <ul class="features-list">
              <li>
                <n-icon size="24" color="var(--color-primary)"><CheckmarkCircleOutline /></n-icon>
                <div>
                  <strong>Quality Guaranteed</strong>
                  <p>All our products undergo strict quality control</p>
                </div>
              </li>
              <li>
                <n-icon size="24" color="var(--color-primary)"><CheckmarkCircleOutline /></n-icon>
                <div>
                  <strong>Competitive Prices</strong>
                  <p>Direct from manufacturer, best wholesale prices</p>
                </div>
              </li>
              <li>
                <n-icon size="24" color="var(--color-primary)"><CheckmarkCircleOutline /></n-icon>
                <div>
                  <strong>Fast Shipping</strong>
                  <p>Multiple shipping options available worldwide</p>
                </div>
              </li>
              <li>
                <n-icon size="24" color="var(--color-primary)"><CheckmarkCircleOutline /></n-icon>
                <div>
                  <strong>Professional Service</strong>
                  <p>Experienced team ready to assist you</p>
                </div>
              </li>
            </ul>
          </div>
        </el-col>
        
        <el-col :xs="24" :md="12">
          <div class="about-images">
            <div v-if="storeImages.length" class="images-grid">
              <el-image 
                v-for="(img, index) in storeImages" 
                :key="index"
                :src="img" 
                fit="cover"
                :preview-src-list="storeImages"
                class="store-image"
              />
            </div>
            <div v-else class="image-placeholder">
              <n-icon size="120" color="var(--color-primary)">
                <StorefrontOutline />
              </n-icon>
              <p>Our Store</p>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- Location Section -->
      <div class="location-section">
        <h2>Our Location</h2>
        <el-row :gutter="40" align="middle">
          <el-col :xs="24" :md="12">
            <div class="location-info">
              <div class="info-item">
                <n-icon size="32" color="var(--color-primary)">
                  <LocationOutline />
                </n-icon>
                <div>
                  <h4>Address</h4>
                  <p>{{ appStore.storeInfo.address || 'Yulong Garment City, Yuexiu District, Guangzhou, China' }}</p>
                </div>
              </div>
              
              <div class="info-item">
                <n-icon size="32" color="var(--color-primary)">
                  <CallOutline />
                </n-icon>
                <div>
                  <h4>Phone</h4>
                  <p>{{ appStore.storeInfo.phone || '+86 123 4567 8900' }}</p>
                </div>
              </div>
              
              <div class="info-item">
                <n-icon size="32" color="var(--color-primary)">
                  <MailOutline />
                </n-icon>
                <div>
                  <h4>Email</h4>
                  <p>{{ appStore.storeInfo.email || 'contact@lucyfashion.com' }}</p>
                </div>
              </div>
              
              <div class="info-item">
                <n-icon size="32" color="var(--color-primary)">
                  <TimeOutline />
                </n-icon>
                <div>
                  <h4>Business Hours</h4>
                  <p>Monday - Friday: 9:00 AM - 6:00 PM</p>
                  <p>Saturday: 9:00 AM - 5:00 PM</p>
                  <p>Sunday: Closed</p>
                </div>
              </div>
            </div>
          </el-col>
          
          <el-col :xs="24" :md="12">
            <div class="map-placeholder">
              <n-icon size="80" color="var(--color-primary)">
                <MapOutline />
              </n-icon>
              <p>Yulong Garment City</p>
              <p>Guangzhou, China</p>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- Shipping Section -->
      <div class="shipping-section">
        <h2>Shipping & Logistics</h2>
        <el-row :gutter="30">
          <el-col :xs="24" :sm="8">
            <div class="shipping-card">
              <n-icon size="48" color="var(--color-primary)">
                <AirplaneOutline />
              </n-icon>
              <h3>Air Freight</h3>
              <p>Fast delivery for urgent orders</p>
            </div>
          </el-col>
          <el-col :xs="24" :sm="8">
            <div class="shipping-card">
              <n-icon size="48" color="var(--color-primary)">
                <BoatOutline />
              </n-icon>
              <h3>Sea Freight</h3>
              <p>Cost-effective for large orders</p>
            </div>
          </el-col>
          <el-col :xs="24" :sm="8">
            <div class="shipping-card">
              <n-icon size="48" color="var(--color-primary)">
                <CarOutline />
              </n-icon>
              <h3>Express (DHL)</h3>
              <p>Door-to-door express service</p>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- CTA Section -->
      <div class="cta-section">
        <h2>Ready to Start Your Order?</h2>
        <p>Contact us today and let us help you find the perfect African fashion products</p>
        <div class="cta-actions">
          <router-link to="/products" class="btn btn-primary">
            <n-icon size="20"><BagHandleOutline /></n-icon>
            Browse Products
          </router-link>
          <router-link to="/contact" class="btn btn-outline">
            <n-icon size="20"><ChatbubbleEllipsesOutline /></n-icon>
            Contact Us
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { NIcon } from 'naive-ui'
import {
  CheckmarkCircleOutline,
  StorefrontOutline,
  LocationOutline,
  CallOutline,
  MailOutline,
  TimeOutline,
  MapOutline,
  AirplaneOutline,
  BoatOutline,
  CarOutline,
  BagHandleOutline,
  ChatbubbleEllipsesOutline
} from '@vicons/ionicons5'
import { useAppStore } from '@/stores/app'

const appStore = useAppStore()

const storeImages = computed(() => {
  return appStore.storeInfo.store_images || []
})
</script>

<style lang="scss" scoped>
.about-page {
  padding: 2rem 0 4rem;
}

.page-header {
  text-align: center;
  margin-bottom: 4rem;
  
  h1 {
    font-size: 2.5rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
  }
  
  p {
    font-size: 1.25rem;
    color: var(--text-secondary);
  }
}

.about-section {
  margin-bottom: 4rem;
}

.about-text {
  h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
  }
  
  h3 {
    font-size: 1.5rem;
    margin: 2rem 0 1rem;
    color: var(--color-primary);
  }
  
  p {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
  }
}

.features-list {
  list-style: none;
  padding: 0;
  
  li {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    
    > div {
      flex: 1;
      
      strong {
        display: block;
        font-size: 1.125rem;
        color: var(--text-primary);
        margin-bottom: 0.25rem;
      }
      
      p {
        margin: 0;
        font-size: 1rem;
      }
    }
  }
}

.about-images {
  .images-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    
    .store-image {
      width: 100%;
      height: 250px;
      border-radius: var(--radius-lg);
      overflow: hidden;
      
      &:first-child {
        grid-column: 1 / -1;
        height: 350px;
      }
    }
  }
  
  .image-placeholder {
    height: 600px;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-secondary-light));
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    p {
      font-size: 1.5rem;
      color: var(--color-accent);
      margin-top: 1rem;
    }
  }
}

.location-section,
.shipping-section {
  margin-bottom: 4rem;
  
  h2 {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 3rem;
    color: var(--text-primary);
  }
}

.location-info {
  .info-item {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    
    > div {
      flex: 1;
      
      h4 {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
        color: var(--text-primary);
      }
      
      p {
        color: var(--text-secondary);
        margin-bottom: 0.25rem;
      }
    }
  }
}

.map-placeholder {
  height: 100%;
  min-height: 400px;
  background-color: var(--color-gray-light);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  p {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin-top: 1rem;
  }
}

.shipping-section {
  padding: 3rem;
  background-color: var(--color-gray-light);
  border-radius: var(--radius-xl);
}

.shipping-card {
  text-align: center;
  padding: 2rem;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  transition: var(--transition-base);
  
  &:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
  }
  
  h3 {
    font-size: 1.25rem;
    margin: 1rem 0 0.5rem;
    color: var(--text-primary);
  }
  
  p {
    color: var(--text-secondary);
  }
}

.cta-section {
  text-align: center;
  padding: 4rem 2rem;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  border-radius: var(--radius-xl);
  color: white;
  
  h2 {
    font-size: 2rem;
    color: var(--color-primary-light);
    margin-bottom: 1rem;
  }
  
  p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9);
  }
}

.cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 180px;
  }
  
  .btn-outline {
    border-color: white;
    color: white;
    
    &:hover {
      background-color: white;
      color: var(--color-accent);
    }
  }
}

@media (max-width: 768px) {
  .page-header h1 {
    font-size: 2rem;
  }
  
  .about-section {
    .about-text {
      margin-bottom: 2rem;
    }
  }
  
  .about-images .images-grid .store-image {
    height: 200px;
    
    &:first-child {
      height: 250px;
    }
  }
  
  .shipping-section {
    padding: 2rem 1rem;
  }
  
  .cta-section {
    padding: 3rem 1rem;
  }
}
</style>

